<template>
  <div>
    <a href="#" style="color:#000;" @click="showDrawer('large')"
      ><setting-outlined /></a
    >
    <a-drawer
      title="Basic Drawer"
      :size="size"
      :visible="visible"
      @close="onClose"
    >
      <template #extra>
        <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
        <a-button type="primary" @click="onClose">Submit</a-button>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>
  </div>
</template>
<script>
import {SettingOutlined} from '@ant-design/icons-vue';
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const visible = ref(false);
    const size = ref("default");

    const showDrawer = (val) => {
      size.value = val;
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    return {
      visible,
      size,
      showDrawer,
      onClose,
    };
    
  },
    components:{
        SettingOutlined
    }
});
</script>